<template>
  <div class="toolBar">
    <div class="block">
      <p style="margin-right:5px;display: inline;font-size:15px">类型:</p><el-select
        class="selectOpera"
        v-model="selectOpera"
        @change="selectOperaFn"
      >
        <el-option
          v-for="item in operaOption"
          :key="item.value"
          :label="item.label"
          :value="item"
        >
        </el-option>
      </el-select>
      <p style="margin-right:5px;display: inline;font-size:15px">开始日期:</p><el-date-picker
        class="blockStart"
        v-model="pickerDate.StartTime"
        type="datetime"
        placeholder="开始日期"
        :picker-options="pickerOptions"
        :clearable="false"
        @change="changePickerDate(pickerDate.StartTime, 'StartTime')"
      >
      </el-date-picker>
      <p style="margin-right:5px;display: inline;font-size:15px">结束日期:</p><el-date-picker
        class="blockEnd"
        v-model="pickerDate.EndTime"
        type="datetime"
        placeholder="结束日期"
        :picker-options="pickerOptions"
        :clearable="false"
        @change="changePickerDate(pickerDate.EndTime, 'EndTime')"
      >
      </el-date-picker>
      <span>
        <i style="font-style: normal; font-size: 16px; margin-right: 10px;font-size:15px">使用率:</i>
        <el-input-number
          size="small"
          @change="IntervalOperaFn"
          v-model="fre"
          :min="0"
          :max="this.fre2 - 1"
        ></el-input-number>
        至
        <el-input-number
          size="small"
          @change="IntervalOperaFnTwo"
          v-model="fre2"
          :min="this.fre + 1"
          :max="100"
        ></el-input-number>
      </span>
      
      <el-button type="primary" size="medium" plain @click="searchTotal">查询</el-button>
    </div>
    <div class="tableTool">
            <el-tooltip content="导出" placement="top" effect="dark">
                <download-excel
                    class="downExcel"
                    type="xls"
                    :data="tableData"
                    :fields="tableDataFields"
                    :name="excelName">
                    <el-button
                        class="btnExport"
                        icon="el-icon-jk-export">
                    </el-button>
                </download-excel>
            </el-tooltip>
        </div>
  </div>
</template>

<script>
import bus from "common/bus.js";
import moment from "moment";
export default {
  props: ["tableData", "tableDataFields"],
  computed: {},
  data() {
    return {
      operaOption: [
        {
          value: "cpu",
          label: "CPU",
        },
        {
          value: "memory",
          label: "内存",
        },
      ],
      changeLie: "",
      selectOpera: {},
      fre: 0,
      fre2:100,
	  // level:'more',
      checkedArr: [],
      toolBarDisabled: false,
      pickerDateTime: {},
      // thisTime:,
      pickerDate: {
        // 更改开始时间
        StartTime: new Date(moment().subtract(7, 'days').format("YYYY-MM-DD HH:mm:ss")),
        // StartTime:'',
        EndTime: new Date(),
      },
      //禁止选未来时间
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
      excelName:"",
    };
  },
  created() {
    this.initOperaDate();
    this.initPickerDate();
    this.initIntervalDate();
    this.initStartTIme();
  },
  mounted(){
    this.changeExcelName()
  },
  computed: {},
  methods: {
    initOperaDate() {
      this.selectOpera = this.operaOption[0];

      this.$emit("selectOpera", this.selectOpera);
    },
    initStartTIme() {
      this.pickerDate.StartTime = moment().subtract(7, 'days').format("YYYY-MM-DD HH:mm:ss");
      this.pickerDate.EndTime = new Date();
    },
    initPickerDate() {
      let _json = {};

      for (const key in this.pickerDate) {
        const element = this.pickerDate[key];
        _json[key] = this.formatDate(element);
      }

      this.$emit("pickerDate", _json);
    },
    initIntervalDate() {
      this.fre = 0;

      this.$emit("intervalOpera", this.fre);
    },
    changeExcelName(){
      let sTime = moment(this.pickerDate.StartTime).format('YYYY年MM月DD日HH时mm分ss秒');
      let eTime = moment(this.pickerDate.EndTime).format('YYYY年MM月DD日HH时mm分ss秒');
      this.excelName = sTime+"至"+eTime+this.selectOpera.label+"负载"+"大于"+this.fre+"小于"+this.fre2+"的服务器节点情况";
    },
    selectOperaFn(item) {
      this.$emit("selectOpera", item);
      this.changeExcelName();
    },
    IntervalOperaFn(item) {
      this.$emit("intervalOpera", item);
    },
    IntervalOperaFnTwo(item){
      this.$emit("intervalOperaTwo", item);
    },
    // 选择时间
    changePickerDate(date, key) {
      this.pickerDateTime = {};

      this.pickerDateTime[key] = this.formatDate(date);

      this.$emit("pickerDate", this.pickerDateTime);
    },
	ChangeDirection(val) {
		this.$emit('selectDirection', val)
	},
    // 格式化时间
    formatDate(date) {
      let _time = "";

      if (date) {
        let _year = date.getFullYear().toString();
        let _month = (date.getMonth() + 1).toString().padStart(2, "0");
        let _day = date.getDate().toString().padStart(2, "0");
        let _hour = date.getHours().toString().padStart(2, "0");
        let _minute = date.getMinutes().toString().padStart(2, "0");
        let _second = date.getSeconds().toString().padStart(2, "0");

        _time =
          _year +
          "-" +
          _month +
          "-" +
          _day +
          " " +
          _hour +
          ":" +
          _minute +
          ":" +
          _second;
      }
      return _time;
    },
  searchTotal() {
    this.$emit("searchTotal")
  }  
  },
  watch: {
   
  },
};
</script>

<style scoped>
.toolBar {
  overflow: hidden;
  margin-bottom: 14px;
}
.toolBar .searchBox {
  float: left;
}
.toolBar .searchBox .searchInput {
  display: inline-block;
  width: 240px;
  margin-right: 10px;
}
.toolBar .searchBox .selectLevel,
.selectNodeType {
  display: inline-block;
  width: 150px;
  margin-right: 10px;
}
.toolBar .block {
  float: left;
}
.toolBar .block > * {
  margin-right: 10px;
}
.toolBar .block .selectOpera,
.inputFilter {
  width: 150px;
}
.toolBar /deep/ .el-popper[x-placement^="bottom"] {
  margin-top: 63px;
}
.toolBar .tableTool {
  float: right;
}
.toolBar .tableTool .btnLie {
  margin-right: 10px;
}
.toolBar .tableTool .downExcel {
  display: inline-block;
}
#myCheckboxGroup /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266;
}
#myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #5fb878;
  border-color: #5fb878;
}
#myCheckboxGroup /deep/ .el-checkbox {
  margin-bottom: 8px;
}
.selectOpera {
  margin-bottom: 10px;
}
</style>
